<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博搜索</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/microblog_search.css">
</head>
<body>
<div class="nav">
    <img src="image/微博图标.jpeg" alt="">
    <span class="title">微博管理系统</span>
    <span class="spacer"></span>
    <a href="microblog_search.html">搜索</a>
    <a href="microblog_list.html">新鲜事</a>
    <a href="microblog_edit.html">写微博</a>
    <a href="logout">退出</a>
</div>

<div class="blog-edit-container">

    <div class="title">
        <input type="text" id="message" placeholder="输入要搜索的微博id">
        <button>提交</button>
    </div>

    <div class="result">
        <img src="image/人物.png" alt="">
        <h4>暂无查找用户</h4>
        <input type="button" id="button" value="" class="div">

    </div>


</div>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
    let container = document.querySelector('.blog-edit-container');
    let messageInput = document.querySelector('#message');
    let button = document.querySelector('button');
    var onOff=false;
    button.onclick = function(){
        let message = messageInput.value;
        if (message == '') {
            return;
        }
        let messageJson = {
            "message": message
        };
        $.ajax({
            type: 'post',
            //相对路径的写法
            url: 'search',
            data: JSON.stringify(messageJson),
            success: function(body){
                //让后端在查询失败的时候, 不要返回200, 而是返回403
                //避免在前面这里触发success分支
                if(body.username != null){
                    let h4 = document.querySelector('.result>h4');
                    h4.innerHTML = body.username;
                    if(body.isLive == 1){
                        var div=$(".div");
                        div.val("取消订阅");
                        onOff=true;
                    }else{
                        var div=$(".div");
                        div.val("订阅");
                    }
                }
            }
        });
    }


    $(document).ready(function(){
        var div=$(".div");
        div.click(function(){
            if (div.onOff) {
                div.val("订阅");
                $.ajax({
                    type: 'get',
                    url: 'connect',
                    success: function(body){
                        div.onOff = false;
                    }
                });
                //div.css({"background-color": 'rgba(255, 255, 255, 0.1)'});

            } else {
                //div.css({"background":'black'});
                div.val("取消订阅");
                $.ajax({
                    type: 'post',
                    url: 'connect',
                    success: function(body){
                        div.onOff = true;
                    }
                });


            }
        });
    });

    // 验证登录状态
    checkLogin();

</script>

</body>
</html>